import { useState,useEffect } from 'react';
import { Outlet } from 'react-router-dom'
import { Layout, Menu } from 'antd';
import type { MenuProps } from 'antd';
import { useSelector,useDispatch } from 'react-redux';
import type {Dispatch} from 'redux' 
import {RootState} from '../../store/Types' 
import { getMenu } from '../../store/auth/action'; 
const { Header, Footer, Sider, Content } = Layout;
function Admin() {
  const [current, setCurrent] = useState('mail');
  const menuList = useSelector<RootState, any>((state) => state.auth.menu);
  console.log(menuList)
  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };
  const dispatch:Dispatch<any>= useDispatch();//使用 useDispatch 来获取 dispatch 函数  
  useEffect(() => {  
    dispatch(getMenu());  // 在组件加载时派发 getMenu action  
  }, [dispatch]); 

  return (

    <Layout style={{ width: "100vw", height: "100vh" }}>
      <Header >Header</Header>
      <Layout>
        <Sider>
          <Menu onClick={onClick} selectedKeys={[current]} 
          mode="inline"
          items={menuList} />;
        </Sider>
        <Content>
          <Outlet></Outlet>
        </Content>
        
      </Layout>
      <Footer>Footer</Footer>
    </Layout>
  );
}

export default Admin;